{% extends 'base_exam.html' %}

{% block title %}Exam — {{ course.title }}{% endblock %}

{% block exam_header_meta %}
  {% if is_practice %}Practice · timer not started{% else %}{{ course.title }} · secure session{% endif %}
{% endblock %}

{% block extra_css %}
<style>
  .exam-q {
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.25rem 1.35rem;
    background: #fff;
    min-height: 12rem;
  }
  .exam-q.d-none { display: none !important; }
  .exam-choice-row {
    border: 1px solid #e2e8f0;
    border-radius: .75rem;
    padding: .65rem .9rem;
    margin-bottom: .5rem;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    user-select: none;
  }
  .exam-choice-row:hover { border-color: #94a3b8; background: #f8fafc; }
  .exam-choice-row:has(input:checked) {
    border-color: #0d6efd;
    background: #eff6ff;
  }
  .exam-timer-bar {
    position: sticky; top: 0; z-index: 40;
    background: #0f172a; color: #fff;
    padding: .75rem 1rem; border-radius: .75rem;
    margin-bottom: 1rem;
    display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
    align-items: center; justify-content: space-between;
  }
  .exam-timer-bar.warn { background: #b45309; }
  .exam-timer-bar.danger { background: #be123c; animation: pulse 1s ease infinite; }
  @keyframes pulse { 50% { opacity: .85; } }
  #exam-timer {
    font-variant-numeric: tabular-nums;
    font-size: 1.75rem; font-weight: 700; letter-spacing: .04em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  }
  .practice-banner {
    background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
    color: #fff;
    border-radius: 1rem;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
  }
  .lockdown-note {
    border-left: 4px solid #b45309;
    background: #fffbeb;
    border-radius: .5rem;
    padding: .75rem 1rem;
    font-size: .875rem;
  }
  .exam-shell-card, .exam-q, .exam-choice-row, .fw-semibold {
    -webkit-user-select: none;
    user-select: none;
  }
  #fs-warning {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(15, 23, 42, .88);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
  }
  #fs-warning.show { display: flex; }
  #fs-warning .panel {
    background: #fff;
    border-radius: 1rem;
    padding: 1.5rem;
    max-width: 28rem;
    text-align: center;
  }
  #flag-banner {
    display: none;
    border-radius: .75rem;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    padding: .65rem 1rem;
    font-size: .875rem;
    margin-bottom: 1rem;
  }
  #flag-banner.show { display: block; }
</style>
{% endblock %}

{% block content %}
{% if is_practice %}
<div class="practice-banner">
  <div class="fw-bold mb-1"><i class="bi bi-lightbulb me-1"></i>Practice question</div>
  <div class="small opacity-90 mb-0">
    Not scored. Select an option, then start the real exam — it will enter <strong>full screen</strong>
    and the timer begins. Tab switches are logged; after {{ flag_threshold }} the attempt is flagged for review (not auto-failed).
  </div>
</div>

<div class="exam-q" id="practice-q">
  <div class="text-muted small mb-2">Sample · not counted</div>
  <div class="fw-semibold mb-3">
    Which option best describes how this exam works?
  </div>
  <div class="exam-choice-row">
    <div class="form-check mb-0">
      <input class="form-check-input" type="radio" name="practice_q" id="pq1" value="1">
      <label class="form-check-label" for="pq1">One question at a time; stay in full screen</label>
    </div>
  </div>
  <div class="exam-choice-row">
    <div class="form-check mb-0">
      <input class="form-check-input" type="radio" name="practice_q" id="pq2" value="2">
      <label class="form-check-label" for="pq2">You may freely use other tabs during the test</label>
    </div>
  </div>
  <div class="exam-choice-row">
    <div class="form-check mb-0">
      <input class="form-check-input" type="radio" name="practice_q" id="pq3" value="3">
      <label class="form-check-label" for="pq3">Copying answers from elsewhere is allowed</label>
    </div>
  </div>
  <div class="exam-choice-row">
    <div class="form-check mb-0">
      <input class="form-check-input" type="radio" name="practice_q" id="pq4" value="4">
      <label class="form-check-label" for="pq4">There is no time limit</label>
    </div>
  </div>
</div>

<div class="lockdown-note mt-3 mb-3">
  <strong>Important:</strong> Switching tabs or exiting full screen will be <strong>logged</strong>.
  After {{ flag_threshold }} tab switches this attempt is <strong>flagged for manual review</strong>
  — it is not automatically failed. Stay in this window until you submit.
</div>

<form method="post" action="{% url 'courses:begin_timed_exam' attempt.pk %}" id="begin-form">
  {% csrf_token %}
  <button type="submit" class="btn btn-success btn-lg w-100 fw-semibold" id="begin-btn" disabled>
    Start real exam (full screen + timer)
  </button>
</form>

{% else %}
<div class="exam-timer-bar" id="timer-bar">
  <div>
    <div class="small opacity-75">Time remaining · {{ time_limit_minutes }} min total</div>
    <div id="exam-timer"
         data-seconds="{{ seconds_remaining }}"
         data-deadline="{{ deadline_iso }}">--:--</div>
  </div>
  <div class="small text-end">
    <div>Question <strong id="q-pos">1</strong> / {{ questions|length }}</div>
    <div class="opacity-75">Answered: <strong id="answered-count">0</strong></div>
  </div>
</div>

<div id="flag-banner">
  <i class="bi bi-flag-fill text-warning me-1"></i>
  This attempt has been <strong>flagged for review</strong> due to repeated tab/window switches.
  You may continue — results are still scored normally.
</div>

<div class="lockdown-note mb-3">
  <i class="bi bi-exclamation-triangle-fill text-warning me-1"></i>
  Stay in full screen. Tab switches and leaving full screen are logged.
  Copy/paste is disabled. Browser back is blocked during the attempt.
</div>

<form method="post" id="exam-form"
      action="{% url 'courses:take_exam' attempt.pk %}"
      data-event-url="{{ event_url }}"
      data-save-url="{{ save_answer_url }}"
      data-result-url="{% url 'courses:exam_result' attempt.pk %}"
      data-flag-threshold="{{ flag_threshold }}"
      data-flagged="{% if attempt.is_flagged_for_review %}1{% else %}0{% endif %}">
  {% csrf_token %}
  <input type="hidden" name="auto_submit" id="auto-submit-flag" value="0">
  {% for aq in questions %}
  <div class="exam-q{% if not forloop.first %} d-none{% endif %}" data-q-index="{{ forloop.counter0 }}" id="aq{{ aq.pk }}">
    <div class="fw-semibold mb-3">{{ forloop.counter }}. {{ aq.presented_question_text }}</div>

    <div class="exam-choice-row">
      <div class="form-check mb-0">
        <input class="form-check-input exam-choice" type="radio"
               name="aq_{{ aq.pk }}" id="aq{{ aq.pk }}_A" value="A" data-aq-id="{{ aq.pk }}"
               {% if aq.selected_display_option == 'A' %}checked{% endif %}>
        <label class="form-check-label" for="aq{{ aq.pk }}_A"><strong>A.</strong> {{ aq.presented_option_a }}</label>
      </div>
    </div>
    <div class="exam-choice-row">
      <div class="form-check mb-0">
        <input class="form-check-input exam-choice" type="radio"
               name="aq_{{ aq.pk }}" id="aq{{ aq.pk }}_B" value="B" data-aq-id="{{ aq.pk }}"
               {% if aq.selected_display_option == 'B' %}checked{% endif %}>
        <label class="form-check-label" for="aq{{ aq.pk }}_B"><strong>B.</strong> {{ aq.presented_option_b }}</label>
      </div>
    </div>
    <div class="exam-choice-row">
      <div class="form-check mb-0">
        <input class="form-check-input exam-choice" type="radio"
               name="aq_{{ aq.pk }}" id="aq{{ aq.pk }}_C" value="C" data-aq-id="{{ aq.pk }}"
               {% if aq.selected_display_option == 'C' %}checked{% endif %}>
        <label class="form-check-label" for="aq{{ aq.pk }}_C"><strong>C.</strong> {{ aq.presented_option_c }}</label>
      </div>
    </div>
    <div class="exam-choice-row">
      <div class="form-check mb-0">
        <input class="form-check-input exam-choice" type="radio"
               name="aq_{{ aq.pk }}" id="aq{{ aq.pk }}_D" value="D" data-aq-id="{{ aq.pk }}"
               {% if aq.selected_display_option == 'D' %}checked{% endif %}>
        <label class="form-check-label" for="aq{{ aq.pk }}_D"><strong>D.</strong> {{ aq.presented_option_d }}</label>
      </div>
    </div>
  </div>
  {% endfor %}

  <div class="d-flex gap-2 mt-3">
    <button type="button" class="btn btn-primary flex-grow-1 fw-semibold" id="next-btn" disabled>
      Next question
    </button>
    <button type="submit" class="btn btn-success flex-grow-1 fw-semibold d-none" id="submit-btn" disabled>
      Submit exam
    </button>
  </div>
  <p class="text-muted small mt-2 mb-0" id="select-hint">Select an option to continue.</p>
</form>

<div id="fs-warning" role="dialog" aria-modal="true" aria-labelledby="fs-warn-title">
  <div class="panel">
    <div class="display-6 text-warning mb-2"><i class="bi bi-fullscreen-exit"></i></div>
    <h5 id="fs-warn-title" class="fw-bold">Stay in full screen</h5>
    <p class="small text-muted mb-3">
      Exiting full screen was logged. Return to full screen to continue your exam.
      Repeated tab switches may flag this attempt for review.
    </p>
    <button type="button" class="btn btn-primary w-100" id="fs-reenter-btn">Return to full screen</button>
  </div>
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
(function () {
  {% if is_practice %}
  var beginBtn = document.getElementById('begin-btn');
  var beginForm = document.getElementById('begin-form');
  document.querySelectorAll('input[name="practice_q"]').forEach(function (r) {
    r.addEventListener('change', function () { beginBtn.disabled = false; });
  });
  beginForm.addEventListener('submit', function () {
    var root = document.documentElement;
    var req = root.requestFullscreen || root.webkitRequestFullscreen || root.msRequestFullscreen;
    if (req) { try { req.call(root); } catch (err) {} }
    beginBtn.disabled = true;
    beginBtn.textContent = 'Starting…';
  });
  return;
  {% endif %}

  var form = document.getElementById('exam-form');
  var el = document.getElementById('exam-timer');
  var bar = document.getElementById('timer-bar');
  if (!form || !el) return;

  var csrf = form.querySelector('[name=csrfmiddlewaretoken]').value;
  var eventUrl = form.dataset.eventUrl;
  var saveUrl = form.dataset.saveUrl;
  var panels = Array.prototype.slice.call(document.querySelectorAll('.exam-q[data-q-index]'));
  var nextBtn = document.getElementById('next-btn');
  var submitBtn = document.getElementById('submit-btn');
  var qPos = document.getElementById('q-pos');
  var hint = document.getElementById('select-hint');
  var fsWarn = document.getElementById('fs-warning');
  var flagBanner = document.getElementById('flag-banner');
  var index = 0;
  var submitted = false;
  var examActive = true;
  var lockdownArmed = false;

  if (form.dataset.flagged === '1' && flagBanner) flagBanner.classList.add('show');

  var seconds = parseInt(el.dataset.seconds, 10);
  if (isNaN(seconds) || seconds < 0) {
    var end = new Date(el.dataset.deadline).getTime();
    seconds = Math.max(0, Math.floor((end - Date.now()) / 1000));
  }

  function isFullscreen() {
    return !!(document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
  }

  function enterFullscreen() {
    var root = document.documentElement;
    var req = root.requestFullscreen || root.webkitRequestFullscreen || root.msRequestFullscreen;
    if (!req) { lockdownArmed = true; return; }
    try {
      var p = req.call(root);
      if (p && typeof p.then === 'function') {
        p.then(function () {
          postEvent('fullscreen_enter');
          setTimeout(function () { lockdownArmed = true; }, 800);
        }).catch(function () { lockdownArmed = true; });
      } else {
        setTimeout(function () { lockdownArmed = true; }, 800);
      }
    } catch (e) { lockdownArmed = true; }
  }

  function exitFullscreenQuiet() {
    var ex = document.exitFullscreen || document.webkitExitFullscreen || document.msExitFullscreen;
    if (ex && isFullscreen()) { try { ex.call(document); } catch (e) {} }
  }

  function postEvent(type, detail, useBeacon) {
    if (!eventUrl) return;
    var fd = new FormData();
    fd.append('csrfmiddlewaretoken', csrf);
    fd.append('event_type', type);
    if (detail) fd.append('detail', detail);
    if (useBeacon && navigator.sendBeacon) {
      try { navigator.sendBeacon(eventUrl, fd); } catch (e) {}
      return;
    }
    fetch(eventUrl, { method: 'POST', body: fd, credentials: 'same-origin', keepalive: true })
      .then(function (r) { return r.json(); })
      .then(function (data) {
        if (!data || !data.ok) return;
        if (data.is_flagged_for_review && flagBanner) flagBanner.classList.add('show');
      })
      .catch(function () {});
  }

  function saveAnswer(input) {
    if (!saveUrl || !input) return;
    var fd = new FormData();
    fd.append('csrfmiddlewaretoken', csrf);
    fd.append('aq_' + input.dataset.aqId, input.value);
    fetch(saveUrl, { method: 'POST', body: fd, credentials: 'same-origin' }).catch(function () {});
  }

  function currentPanel() { return panels[index]; }

  function panelAnswered(panel) {
    return !!(panel && panel.querySelector('.exam-choice:checked'));
  }

  function updateAnswered() {
    var names = {};
    document.querySelectorAll('.exam-choice:checked').forEach(function (r) { names[r.name] = true; });
    var countEl = document.getElementById('answered-count');
    if (countEl) countEl.textContent = Object.keys(names).length;
  }

  function updateNav() {
    var last = index >= panels.length - 1;
    var answered = panelAnswered(currentPanel());
    nextBtn.classList.toggle('d-none', last);
    submitBtn.classList.toggle('d-none', !last);
    nextBtn.disabled = !answered;
    submitBtn.disabled = !answered;
    if (qPos) qPos.textContent = String(index + 1);
    if (hint) {
      hint.textContent = answered
        ? (last ? 'Last question — submit when ready.' : 'Option selected — you can go next.')
        : 'Select an option to continue.';
    }
    updateAnswered();
  }

  function showIndex(i) {
    panels.forEach(function (p, n) { p.classList.toggle('d-none', n !== i); });
    index = i;
    updateNav();
  }

  panels.forEach(function (panel) {
    panel.querySelectorAll('.exam-choice').forEach(function (r) {
      r.addEventListener('change', function () {
        updateNav();
        saveAnswer(r);
      });
    });
    panel.querySelectorAll('.exam-choice-row').forEach(function (row) {
      row.addEventListener('click', function (e) {
        if (e.target.tagName === 'INPUT' || e.target.tagName === 'LABEL') return;
        var input = row.querySelector('input.exam-choice');
        if (input) {
          input.checked = true;
          input.dispatchEvent(new Event('change', { bubbles: true }));
        }
      });
    });
  });

  nextBtn.addEventListener('click', function () {
    if (!panelAnswered(currentPanel())) return;
    if (index < panels.length - 1) showIndex(index + 1);
  });

  form.addEventListener('submit', function () {
    submitted = true;
    examActive = false;
    lockdownArmed = false;
    submitBtn.disabled = true;
    nextBtn.disabled = true;
    exitFullscreenQuiet();
  });

  function showFsWarning() {
    if (fsWarn) fsWarn.classList.add('show');
    postEvent('warning_shown', 'fullscreen_exit');
  }

  function hideFsWarning() {
    if (fsWarn) fsWarn.classList.remove('show');
  }

  document.getElementById('fs-reenter-btn').addEventListener('click', function () {
    hideFsWarning();
    enterFullscreen();
  });

  document.addEventListener('visibilitychange', function () {
    if (!lockdownArmed || submitted || !examActive) return;
    if (document.hidden) postEvent('tab_switch', 'visibility_hidden');
  });

  window.addEventListener('blur', function () {
    if (!lockdownArmed || submitted || !examActive) return;
    setTimeout(function () {
      if (!lockdownArmed || submitted) return;
      if (document.hidden) return;
      postEvent('window_blur');
    }, 200);
  });

  window.addEventListener('beforeunload', function (e) {
    if (!examActive || submitted) return;
    e.preventDefault();
    e.returnValue = '';
  });

  function onFsChange() {
    if (!lockdownArmed || submitted) return;
    if (!isFullscreen()) {
      postEvent('fullscreen_exit');
      showFsWarning();
    }
  }
  document.addEventListener('fullscreenchange', onFsChange);
  document.addEventListener('webkitfullscreenchange', onFsChange);

  ['copy', 'cut', 'paste'].forEach(function (evt) {
    document.addEventListener(evt, function (e) {
      if (!examActive || submitted) return;
      e.preventDefault();
      postEvent(evt === 'paste' ? 'paste_attempt' : 'copy_attempt', evt);
    });
  });
  document.addEventListener('contextmenu', function (e) {
    if (!examActive || submitted) return;
    e.preventDefault();
  });

  history.pushState({ exam: 1 }, '', location.href);
  window.addEventListener('popstate', function () {
    if (!examActive || submitted) return;
    history.pushState({ exam: 1 }, '', location.href);
    postEvent('nav_back');
  });

  function renderTimer() {
    var m = Math.floor(seconds / 60);
    var s = seconds % 60;
    el.textContent = String(m).padStart(2, '0') + ':' + String(s).padStart(2, '0');
    bar.classList.remove('warn', 'danger');
    if (seconds <= 5 * 60) bar.classList.add('danger');
    else if (seconds <= 10 * 60) bar.classList.add('warn');
  }

  function tick() {
    renderTimer();
    if (seconds <= 0) {
      if (!submitted) {
        submitted = true;
        examActive = false;
        lockdownArmed = false;
        document.getElementById('auto-submit-flag').value = '1';
        submitBtn.disabled = true;
        exitFullscreenQuiet();
        form.submit();
      }
      return;
    }
    seconds -= 1;
    setTimeout(tick, 1000);
  }

  // TODO(later): webcam snapshot monitoring — consent flow + storage cost required.
  enterFullscreen();
  showIndex(0);
  tick();
})();
</script>
{% endblock %}